@import '../../../variables.module'

.row
  display: flex
  background: $main-background-color
  min-height: 46px
  max-height: 46px
  align-items: center
  padding: 0 8px
  border-radius: 4px
  cursor: pointer
  border: solid 1px transparent
  margin-right: 10px
  &:not(:first-child)
    margin-top: 10px

  &:hover
    border: solid 1px lighten(#4253a5, 20%)

.rowSelected
  border: 1px $blue-color solid

.ruleSuccessRow
  background: #E8FFF1

.ruleSuccessRowSelected
  border: 1px #6FCF97 solid
  border-left: 5px #6FCF97 solid

.ruleFailureRow
  background: #FFE9EF

.ruleFailureRowSelected
  border: 1px $failure-color solid
  border-left: 5px $failure-color solid

.ruleNumberText
  font-size: 12px
  font-weight: 600
  white-space: nowrap

.ruleNumberTextFailure
  color: #DB2156

.ruleNumberTextSuccess
  color: #219653

.resolvedName
  text-overflow: ellipsis
  white-space: nowrap
  color: $secondary-font-color
  padding-left: 4px
  padding-right: 10px
  display: flex
  font-size: 12px

.timestamp
  font-size: 12px
  color: $secondary-font-color
  padding-left: 12px
  flex-shrink: 0
  width: 185px
  text-align: left

.capture
  margin-top: -60px

.capture img
  height: 14px
  z-index: 1000
  margin-top: 12px
  margin-left: -2px

.endpointServiceContainer
  display: flex
  flex-direction: column
  overflow: hidden
  padding-right: 10px
  padding-top: 4px
  flex-grow: 1

.separatorRight
  display: flex
  border-right: 1px solid $data-background-color
  padding-right: 12px

.separatorLeft
  display: flex
  padding: 4px
  padding-left: 12px

.tcpInfo
  font-size: 12px
  color: $secondary-font-color
  margin-top: 5px
  margin-bottom: 5px

.port
  margin-right: 5px

.ip
  margin-left: 5px

@media (max-width: 1760px)
  .timestamp
    display: none
  .separatorRight
    border-right: 0px

@media (max-width: 1340px)
  .separatorRight
    display: none
